<template>
	<div id="Specific">
		<view-box ref="viewBox">
			<sticky scroll-box="vux_view_box_body" :check-sticky-support="false">
				<tab class="tabWrap" :line-width="2" active-color='#a30000' custom-bar-width="36px">
					<tab-item class="vux-center" v-for="item in tablist" :selected="item.name === '拍卖中'" @on-item-click="getShopList(item.type)" :key="item.type">{{item.name}}</tab-item>
				</tab>
			</sticky>
			<!--拍品列表-->
			<div class="product-list">
				<div class="wrapperList" style="height: 560px;overflow: hidden;">
					<div class="list" style="overflow: hidden;" v-if="status.code == 1">
						<div class="item" v-for="(item,index) in shopList" :key="index">
							<router-link :to="'/Detail/id/' + item.auction_id">
								<div class="img">
									<img :src="'/los' + item.goods_thumb" />
									<div class="time">
										<count-down v-if="cache" :currentTime="item.currenttime" :startTime="item.auction_starttime" :endTime="item.auction_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'" :endText="'已结束'" :dayTxt="':'" :hourTxt="':'" :minutesTxt="':'" :secondsTxt="''">
										</count-down>
									</div>
								</div>
								<div class="info">
									<p class="name">{{item.goods_name}}</p>
									<p class="price">当前价：<span>￥{{item.auction_bidprice}}</span></p>
								</div>
								<!--<span class="icon-auction">拍卖中</span>-->
							</router-link>
						</div>
					</div>
					<div class="list" style="overflow: hidden;" v-else>
						<div class="no-data">
							<img src="../assets/images/home/nodata.png" />
						</div>
					</div>

				</div>
			</div>

			<!--喜欢-->
			<loading :show="show1" :text="text"></loading>
			<toast v-model="success" type="text" width='2.8rem' is-show-mask>{{msg}}</toast>
			<toast v-model="cancel" type="text" width='5rem' is-show-mask>{{msg}}</toast>

		</view-box>

		<bottom></bottom>
	</div>
</template>

<script>
	import top from './comp/Header';
	import bottom from './comp/Footer';
	import $ from 'jquery';
	import CountDown from 'vue2-countdown';
	import BScroll from 'better-scroll';
	import axios from 'axios';
	import {
		Tabbar,
		InlineLoading,
		TabbarItem,
		ButtonTab,
		ButtonTabItem,
		Swiper,
		SwiperItem,
		Grid,
		GridItem,
		Flexbox,
		Toast,
		FlexboxItem,
		Popup,
		PopupHeader,
		Loading,
		Group,
		Tab,
		TabItem,
		Sticky,
		ViewBox
	} from 'vux';

	export default {
		data() {
			return {
				show: false,
				show1: false,
				show2: false,
				percent: 1 / 4,
				cache: true,
				cancel: false,
				text: '加载中',
				concernText: '关注',
				success: false,
				msg: '',
				likes: '32',
				selected: '',
				tablist: [{
						name: '预展中',
						type: '1'
					},
					{
						name: '拍卖中',
						type: '2'
					},
					{
						name: '已结束',
						type: '3'
					},
				],
				listHeight: 0,
				hotSale: '',
				shopRec: [],
				shopList: [],
				status: '',
				flag: true,
				startTime: '',
			}
		},
		components: {
			Tabbar,
			TabbarItem,
			Grid,
			GridItem,
			Swiper,
			SwiperItem,
			Flexbox,
			FlexboxItem,
			Popup,
			PopupHeader,
			Toast,
			Loading,
			Group,
			CountDown,
			BScroll,
			Tab,
			InlineLoading,
			TabItem,
			top,
			bottom,
			Sticky,
			ViewBox
		},
		activated() {
			this.getShopList(2);
			//加载更多
			this.scrollList = new BScroll('.wrapperList', {
				scrollY: true,
				eventPassthrough: 'horizontal',
				click: true,
				stopPropagation: true
			});
		},
		created() {
			this.listHeight = $('.product-list .list').outerHeight(true);
		},
		watch: {
			'$route' (to, from) {
				if(to.name == "Home" && from.name == "Detail") {
					this.$refs.viewBox.scrollTo(this.calHeight());
					console.log('返回：' + this.calHeight());
				}
			}
		},
		//方法
		methods: {
			//获取带状态拍卖信息
			getShopList: function(index) {
				console.log(index);
				let search_keyword = this.$route.query.search_keyword;
				this.$http({
					method: 'GET',
					url: '/los/api/index/auction_list.json?ts=' + index + '&search_keyword=' + search_keyword,
					data: ''
				}).then((result) => {
					this.flag = true;
					this.status = result.data;
					this.shopList = result.data.data;
					this.cache = false;
					this.$nextTick(() => {
						this.shopList = result.data.data;
						this.cache = true;
						this.initScroll(index, search_keyword);
					});
				}).catch((err) => {
					console.log(err);
				})
			},
			initScroll(index, search_keyword) {
				let _this = this;
				let page = 1;
				this.scrollList.on('touchEnd', function(position) {
					if(position.y < (this.maxScrollY + 30)) {
						if(_this.flag == true) {
							//加载中
							page += 1;
							_this.show1 = true;
							setTimeout(function() {
								_this.show1 = false;
								_this.$nextTick(() => {
									console.log(index);
									_this.reloadData(index, page, search_keyword);
									_this.scrollList.refresh();
								})
							}, 1000)
						}
					}
				});
			},
			//下滑加载数据
			reloadData(index, page, search_keyword) {
				axios.get('/los/api/index/auction_list.json?ts=' + index + '&page=' + page + '&search_keyword=' + search_keyword)
					.then((result) => {
						if(result.data.code == 0) {
							this.success = !this.success;
							this.msg = '数据加载完毕';
							this.flag = false;
						} else {
							this.flag = true;
							let data = result.data.data;
							for(let i = 0; i < data.length; i++) {
								this.shopList.push(data[i]);
							}
						}
					}).catch((err) => {
						console.log(err);
					})
				this.$nextTick(() => {
					this.listHeight = $('.product-list .list').outerHeight(true);
				})
			},

			close() {
				this.show = false;
			},
			//分享
			share() {
				this.show2 = true;
			},
			//关闭分享
			closeshare() {
				this.show2 = false;
			},
			//计算高度
			calHeight() {
				let height = 0;
				height = this.listHeight;
				return height;
			}
		},
	}
</script>

<style scoped>
	#Specific {
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
	}
	/*列表项*/

	.no-data {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto 0;
	}

	.no-data img {
		width: 100%;
	}

	.product-list {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #fff;
	}

	.product-list .list {
		width: 100%;
		padding: 0.26666rem;
		padding-left: 0.13333rem;
		background-color: #fff;
	}

	.product-list .list .item {
		position: relative;
		float: left;
		width: 50%;
		padding-left: 0.13333rem;
		margin-bottom: 0.26666rem;
	}

	.product-list .list .item .img {
		position: relative;
		font-size: 0;
	}

	.product-list .list .item .img img {
		width: 100%;
		height: 3.92rem;
	}

	.product-list .list .item .img .time {
		width: 100%;
		height: 0.66666rem;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0 0.26666rem;
		font-size: 0.26666rem;
		color: #fff;
		line-height: 0.72rem;
		background: linear-gradient(rgb(0,0,0,0),rgb(0,0,0,0.5));
	}

	.product-list .list .item .info {
		padding: 0.32rem 0.21333rem 0.34666rem;
		border-left: solid 1px #e6e6e6;
		border-right: solid 1px #e6e6e6;
		border-bottom: solid 1px #e6e6e6;
		height: 1.7rem;
	}

	.product-list .list .item .info .name {
		font-size: 0.34666rem;
		padding-bottom: 0.1rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.product-list .list .item .info .price {
		color: #aaa;
		font-size: 0.29333rem;
	}

	.product-list .list .item .info .price span {
		color: #EB443C;
		font-size: 0.34666rem;
	}

	.product-list .list .item .icon-auction {
		position: absolute;
		top: 0;
		left: 0.3rem;
		padding: 0.05rem 0.1rem;
		color: #fff;
		font-size: 0.32rem;
		background-color: #db4342;
		border-bottom-left-radius: 0.05333rem;
		border-bottom-right-radius: 0.05333rem;
	}
	/*分享*/

	.share-list {
		background-color: #fff;
	}

	.share-list .body {
		padding: 0.56rem 0;
	}

	.share-list .body .vux-flexbox-item {
		text-align: center;
	}

	.share-list .body .name {
		margin-top: 0.26666rem;
		line-height: 1;
		font-size: 0.34666rem;
	}

	.share-list .body .first {
		margin-bottom: 0.53333rem;
	}

	.share-list .foot {
		padding: 0.46666rem 0;
		text-align: center;
	}
	/*悬浮按钮*/

	.button {
		position: fixed;
		right: 0.4rem;
		bottom: 2.37rem;
		z-index: 999;
	}

	.button img {
		width: 1.6rem;
		height: 1.6rem;
	}
</style>
<style>
	.product-list .item .count-down .endtxt,
	.product-list .item .count-down .starttxt,
	.product-list .item .count-down .tiptxt,
	.product-list .item .count-down .day,
	.product-list .item .count-down .hour,
	.product-list .item .count-down .minute,
	.product-list .item .count-down .seconds,
	.product-list .item .count-down i {
		font-size: 0.29333rem;
		display: inline-block;
	}

	.hotsale-list .item .count-down .endtxt,
	.hotsale-list .item .count-down .starttxt,
	.hotsale-list .item .count-down .tiptxt,
	.hotsale-list .item .count-down .day,
	.hotsale-list .item .count-down .hour,
	.hotsale-list .item .count-down .minute,
	.hotsale-list .item .count-down .seconds,
	.hotsale-list .item .count-down i {
		font-size: 0.34666rem;
		display: inline-block;
	}
</style>
